<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id='app'>
        
        <table class="table table-bordered ">
      
            <tbody>
                <tr v-for='(item,index) in list' :key='item.id'
                v-color:lightgreen:lightblue:="index">
                    <th>{{item.id}}</th>
                    <th>{{item.name}}</th>
                    <th>{{item.time}}</th>
                    <th><a @click='del(index)'>删除</a></th>
                </tr>
            </tbody>
        </table>

        
    </div>l
    <script>
    const vm = new Vue({
        el: '#app',
        data: {
            list: [{
                    id: 1,
                    name: '布加迪',
                    time: new Date()
                }, {
                    id: 2,
                    name: '肯尼塞克',
                    time: new Date()
                }, {
                    id: 3,
                    name: '保时捷',
                    time: new Date()
                }
                ]
                

            },
        
        directives:{
                color:{
                    bind(el,binding){
                        let colors=binding.arg.split(':')
                        binding.value=Number(binding.value)
                       
                            if(binding.value%2==0){
                                el.style.backgroundColor =colors[0]
                            }
                            else if(binding.value%2==1){
                                el.style.backgroundColor = colors[1]
                            }
                        
                    }
                }
            },
    })
    </script>
</body>
</html>